<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::header(title='管理员-列表')"></head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>管理员管理</cite></a>
			<a th:href="@{/user/list}">管理员列表</a>
		</span> 
		<a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i>
			</a>
	</div>
	<div class="x-body">
		<form class="layui-form x-center"  th:action="@{/user/list}" style="width: 80%">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<label class="layui-form-label">日期范围</label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="开始日" id="LAY_daterange_s" name="startTime" 
						th:value="${params} ? ${params['startTime']} : ''" />
					</div>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="截止日" id="LAY_daterange_e" name="endTime" 
						th:value="${params} ? ${params['endTime']} : ''" />
					</div>
					<div class="layui-input-inline">
						<input type="text" name="username" placeholder="请输入登录名"
							autocomplete="off" class="layui-input" 
							th:value="${params} ? ${params['username']} : ''" />
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" lay-submit="" lay-filter="sreach">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>
			</div>
		</form>
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<button class="layui-btn"
			th:onclick="|x_admin_show('添加用户','@{/user/add}','600','400')|">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		<span class="x-right" style="line-height: 40px"
			th:text="'共有数据：'+${totalRecords}+' 条'">共有数据：88 条</span></xblock>
			<div class="layui-form">
		<table class="layui-table">
			<thead>
				<tr>
					<th width="10"><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"/></th>
					<th>ID</th>
					<th>登录名</th>
					<th>邮箱</th>
                    <th>最后登录时间</th>
                    <th>加入时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="user: ${users}">
					<td><input type="checkbox" th:value="${user.id}" name="user[]" lay-skin="primary" /></td>
					<td th:text="${user.id}">1</td>
					<td th:text="${user.username}"></td>
					<td th:text="${user.email}"></td>
                    <td th:text="${user.lastLoginTime} ? ${#calendars.format(user.lastLoginTime,'yyyy-MM-dd')} : ''"></td>
                    <td th:text="${user.createTime} ? ${#calendars.format(user.createTime,'yyyy-MM-dd')} : ''"></td>
					<td class="td-status"><span
						class="layui-btn layui-btn-disabled layui-btn-mini"
						th:if="${user.status}==1">已停用</span> <span
						class="layui-btn layui-btn-normal layui-btn-mini"
						th:if="${user.status}==0">已启用</span></td>
					<td class="td-manage">
                    <a style="text-decoration: none"
                        th:onclick="|admin_stop(this,${user.id})|" href="javascript:;"
                        title="停用" th:if="${user.status}==0" > <i class="layui-icon">&#xe601;</i>
                    </a> 
                    <a style="text-decoration: none"
                        th:onclick="|admin_start(this,${user.id})|" href="javascript:;"
                        title="启用" th:if="${user.status}==1" > <i class="layui-icon">&#xe62f;</i>
                    </a> 
					<a title="编辑" href="javascript:;"
						th:onclick="|x_admin_show('编辑','@{/user/edit/{id}(id=${user.id})}','600','400')|"
						class="ml-5" style="text-decoration: none"> <i
							class="layui-icon">&#xe642;</i>
					</a> 
					<a title="删除" href="javascript:;"
						th:onclick="|admin_del(this,'${user.id}')|"
						style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
					</a>
					</td>
				</tr>
			</tbody>
		</table></div>

		<div id="page"></div>
	</div>
	<th:block th:include="common/script::script"></th:block>
	<script th:inline="javascript">
    /*<![CDATA[*/
    	    layui.use([ 'laydate', 'element', 'laypage', 'layer','form'], function() {
            $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            lement = layui.element();//面包导航
            laypage = layui.laypage;//分页
            layer = layui.layer;//弹出层
            form = layui.form();
            //全选
            form.on('checkbox(allChoose)', function(data){
              var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
              child.each(function(index, item){
                item.checked = data.elem.checked;
              });
              form.render('checkbox');
            });
            
            //以上模块根据需要引入

            laypage({
                cont : 'page',
                pages : [[${totalPages}]],
                first : 1,
                last : [[${totalPages}]],
                prev : '<em>&lt;</em>',
                next : '<em>&gt;</em>'
            });

            var start = {
                //min : laydate.now(),
                max : '2099-06-16 23:59:59',
                istoday : false,
                choose : function(datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };

            var end = {
                //min : laydate.now(),
                max : '2099-06-16 23:59:59',
                istoday : false,
                choose : function(datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };

            document.getElementById('LAY_daterange_s').onclick = function() {
                start.elem = this;
                laydate(start);
            }
            document.getElementById('LAY_daterange_e').onclick = function() {
                end.elem = this
                laydate(end);
            }

        });
    
   	  
        
       function initData(){
    	   var data = {};
           var value = $('meta[name="_csrf"]').attr("content");
           var name = $('meta[name="_csrf_header"]').attr("content");
           data[name] = value;
           return data;
       }


       //批量删除提交
       function delAll() {
    	   var data = initData();
           data.ids = [];
           $('input[name="user[]"]:checked').each(function(i,box){
        	   data.ids.push(box.value);
           });
           layer.confirm('确认要删除吗？', function(index) {
               $.post([[@{/user/patch-delete}]],data,function(response){
                   if(response <= 0 ) {
                	 //捉到所有被选中的，发异步进行删除
                       layer.msg('更新失败！', {
                           icon : 1
                       });
                   } else {
                	 //捉到所有被选中的，发异步进行删除
                       layer.msg('删除成功!', {
                           icon : 1
                       });
                       location.replace(location.href);
                   }
                   
               });
           });
       }

        /*停用*/
        function admin_stop(obj, id) {  
            var data = initData();
            data.id = id;
            data.status = 1;
            layer
             .confirm(
                     '确认要停用吗？',
                     function(index) {
                         $.post([[@{/user/status}]],data,function(response){
                             var msg = '已停用!';
                             if(response > 0 ){
                                 $(obj)
                                         .parents("tr")
                                         .find(".td-manage")
                                         .prepend(
                                                 '<a style="text-decoration:none" onClick="admin_start(this,'+id+')" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>');
                                 $(obj)
                                         .parents("tr")
                                         .find(".td-status")
                                         .html(
                                                 '<span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>');
                                 $(obj).remove();
                                 
                             } else {
                                 msg = '更新失败！';
                             }
                             layer.msg(msg, {
                                 icon : 5,
                                 time : 1000
                             });
                         });
                     });
        }

        /*启用*/
        function admin_start(obj, id) {
        	var data = initData();
            data.id = id;
            data.status = 0;
            layer
               .confirm(
                       '确认要启用吗？',
                       function(index) {
                           $.post([[@{/user/status}]],data,function(response){
                               var msg = '已启用!';
                               if (response > 0 ) {

                                   $(obj)
                                           .parents("tr")
                                           .find(".td-manage")
                                           .prepend(
                                                   '<a style="text-decoration:none" onClick="admin_stop(this,'+id+')" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');
                                   $(obj)
                                           .parents("tr")
                                           .find(".td-status")
                                           .html(
                                                   '<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');
                                   $(obj).remove();
                               } else {
                                   msg = '更新失败！';
                               }
                               layer.msg(msg, {
                                   icon : 6,
                                   time : 1000
                               });
                           });
                       });
        }
        
        /*删除*/
        function admin_del(obj, id) {
            layer.confirm('确认要删除吗？', function(index) {
            	var data = initData();
                data.id = id;
            	$.post([[@{/user/delete}]],data,function(response){
            		var msg = '已删除!';
                    if(response > 0 ) {
                    	//发异步删除数据
                        $(obj).parents("tr").remove();
                    } else {
                        msg = '删除失败！';
                    }
                    layer.msg(msg, {
                        icon : 1,
                        time : 1000
                    });
            	});
            });
        }
    /*]]>*/
	</script>
</body>
</html>